<!--
 * @Description: 中文翻译日文工具
 * @Author: ZhangHan
 * @Date: 2025-09-16 17:21:11
 * @LastEditTime: 2025-09-17 09:31:09
 * @LastEditors: ZhangHan
-->
<template>
  <view class="page">
    <view class="header">中文 → 日文 翻译</view>
    <view class="areacontent">
      <view>输入中文</view>
      <view class="textarea">
        <uni-easyinput
          type="textarea"
          v-model="value"
          placeholder="在这里输入需要转换的中文..."
        ></uni-easyinput>
      </view>
    </view>
    <view class="btn_group">
      <view class="tran" @click="handleTranslate">翻译</view>
      <view class="clear" @click="handleClear">清除</view>
    </view>
    <view class="resultbox">
      <view class="title">转换结果</view>
      <view class="box">{{ transfromValue }}</view>
    </view>
    <view class="copybtn" @click="handleCopy">复制</view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { translateZhToJp } from "@/api/translate";
import { copyText } from "@/utils/common";

const value = ref("");
const transfromValue = ref("");

// 翻译
const handleTranslate = async () => {
  if (value.value.trim() === "") {
    uni.showToast({
      duration: 1000,
      mask: true,
      title: "请输入文本",
      icon: "error",
    });
    return;
  }

  const regex = /[a-zA-Z0-9]/;
  if (regex.test(value.value.trim())) {
    uni.showToast({
      duration: 1000,
      mask: true,
      title: "请输入中文",
      icon: "error",
    });
  } else {
    // 这里可以添加实际的翻译逻辑
    const res = await translateZhToJp({ query: value.value.trim() });
    console.log(res);
    transfromValue.value = res.trans_result[0].dst;
  }
};

//清除
const handleClear = () => {
  value.value = "";
  transfromValue.value = "";
};

//复制
const handleCopy = () => {
  if (transfromValue.value.trim() === "") {
    uni.showToast({
      duration: 1000,
      mask: true,
      title: "暂无翻译文本",
      icon: "error",
    });
    return;
  }

  copyText(transfromValue.value);
};  
</script>

<style scoped lang="scss">
@use "./index.scss";
</style>
